<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>文章详情</title>
		<link rel="stylesheet" href="../../assets/css/devices.min.css" type="text/css">
		<link rel="stylesheet" href="../../assets/libs/layui/css/layui.css" />
		<link rel="stylesheet" href="../../assets/css/admin.css" />
		<link rel="stylesheet" href="../../module/formSelects/formSelects-v4.css" />
		<script type="text/javascript" src="../../assets/libs/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../../assets/libs/highlight.min.js"></script>
	</head>

	<body>

		<div class="layui-tab layui-tab-brief">
			<div class="layui-row usertitle zbydatdef">
				<ul class="layui-tab-title zby_t">
					<li class="layui-this">文章内容</li>
					<li>文章评论</li>
				</ul>
			</div>

			<div class="layui-tab-content zby_cs">
				<div class="layui-tab-item zby_it layui-show" style="height: 1000px!important">
					<div id="essayUpdate">
						<div><input type="text" name="essayName" class="zby_es_it" id="wzm" autocomplete="off" placeholder="请输入文章名" /></div>
						<hr style="margin-bottom: 20px;" />

						<div class="layui-row layui-form ">
							<form class="layui-form" id="role-form" action="" lay-filter="zbyUser">
								<div class="layui-col-xs6 layui-col-md4">
									<label>作者：</label>
									<div class="layui-input-inline">
										<select name="lxz" id="zuozhe" lay-verify="required">
											<option value="1">松果健康</option>
										</select>
									</div>
								</div>

								<div class="layui-col-xs6 layui-col-md4">
									<label>分类：</label>
									<div class="layui-input-inline">
										<select name="aa" id="flSele" ay-verify="type" lay-filter="hhh">
										</select>
									</div>
								</div>
								<div class="layui-clear"></div><br />
								<div class="layui-col-xs4 layui-col-md4">
									<label>标签：</label>
									<div class="layui-input-block" style="margin-left: 0px;">
										<input type="text" id="biaoq" name="description" lay-verify="description" autocomplete="off" placeholder="请输入文章标签" class="layui-input" style="width: 50%;">
									</div>
								</div>
								<div class="layui-col-xs8 layui-col-md8">
									<label>简介：</label>
									<div class="layui-input-block" style="margin-left: 0px;">
										<input type="text" id="jianj" name="description" lay-verify="description" autocomplete="off" placeholder="请输入文章简介" class="layui-input">
									</div>
								</div>
							</form>
							<div class="layui-clear"></div><br />
							<div class="layui-col-xs12 layui-col-md4">
								<label>标题图：</label>
								<div class="layui-input-inline">
									<select name="aa" id="bt" ay-verify="type" lay-filter="btt">
										<option selected="selected" value="0">0张</option>
										<option value="1">1张</option>
										<option value="3">3张</option>
									</select>
								</div>
							</div>
							<!--<div class="layui-clear"></div><br />-->
							<div class="layui-col-xs12 layui-col-md6 zbyimg">
								<div class="ml">
									<form class="layui-form" id="formTag1" enctype="multipart/form-data">
										<div class="uploadImgBtn2" id="i1">
											<input class="uploadImg" type="file" name="picUrl" id="file1">
										</div>
									</form>
								</div>
								<div class="ml">
									<form class="layui-form" id="formTag2" enctype="multipart/form-data">
										<div class="uploadImgBtn2" id="i2">
											<input class="uploadImg" type="file" name="picUrl" id="file2">
										</div>
									</form>
								</div>
								<div class="ml">
									<form class="layui-form" id="formTag3" enctype="multipart/form-data">
										<div class="uploadImgBtn2" id="i3">
											<input class="uploadImg" type="file" name="picUrl" id="file3">
										</div>
									</form>
								</div>
							</div>

							<div class="layui-clear"></div>
						</div>

						<hr style="margin-bottom: 20px;margin-top: 20px;" />
						<div>
							<div id="editor">

							</div>
							<div class="zbybtnz">
								<button class="layui-btn" id="qx">取消</button>
								<button class="layui-btn" id="cun">保存</button>
								<button class="layui-btn" id="look">预览</button>
								<i class="layui-clear"></i>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-tab-item zby_its" id="zby_its">
					<table class="layui-table" id="ess-table" lay-filter="ess-table"></table>
				</div>
			</div>
			<div id="thisLook">
				<div class="zbyiPhonex">
					<div class="wrap">
						<div class="marvel-device iphone-x">
							<div class="notch">
								<div class="camera"></div>
								<div class="speaker"></div>
							</div>
							<div class="top-bar"></div>
							<div class="sleep"></div>
							<div class="bottom-bar"></div>
							<div class="volume"></div>
							<div class="overflow">
								<div class="shadow shadow--tr"></div>
								<div class="shadow shadow--tl"></div>
								<div class="shadow shadow--br"></div>
								<div class="shadow shadow--bl"></div>
							</div>
							<div class="inner-shadow"></div>
							<div class="screen zbyx zbyiPhone">
								<div class="left-bar">
									<div class="tou">14:30</div>
									<div class="fh"><i class="layui-icon layui-icon-return"></i></div>
									<div class="ztit">这是一个标题</div>
									<hr />
									<div>松果健康</div>
									<div>12小时前</div>
									<div class="zcont">

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="zbyiPhone8">
					<div class="wrap">
						<div class="marvel-device iphone8">
							<div class="notch">
								<div class="camera"></div>
								<div class="speaker"></div>
							</div>
							<div class="top-bar"></div>
							<div class="sleep"></div>
							<div class="bottom-bar"></div>
							<div class="volume"></div>
							<div class="overflow">
								<div class="shadow shadow--tr"></div>
								<div class="shadow shadow--tl"></div>
								<div class="shadow shadow--br"></div>
								<div class="shadow shadow--bl"></div>
							</div>
							<div class="inner-shadow"></div>
							<div class="screen zby8 zbyiPhone">
								<div class="left-bar">
									<div class="tou">中国移动 </div>
									<div class="fh"><i class="layui-icon layui-icon-return"></i></div>
									<div class="ztit">这是一个标题</div>
									<hr />
									<div>松果健康</div>
									<div>12小时前 · 松果健康官方账号</div>
									<div class="zcont">

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="zbyyl">
					<button class="layui-btn layui-btn-primary zbyylb" id="qh">iPhone 8 预览</button><br />
					<button class="layui-btn layui-btn-primary zbyylb" id="clos">关闭预览</button>
				</div>
			</div>
		</div>
		<script type="text/html" id="essaySwitch">
			<input type="checkbox" name="sex" id="{{d.commentId}}" value="{{d.show}}" lay-skin="switch" lay-text="通过|未通过" lay-filter="essayShow" {{ d.show==1 ? 'checked' : '' }}>
		</script>

		<script type="text/html" id="essay-table-bar">
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

		<script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
		<script type="text/javascript" src="../../module/common.js"></script>
		<script type="text/javascript" src="../../assets/libs/wangEditor.min.js"></script>
		<script>
			function aaa(e) {
				var a = ""
				var formData = new FormData();
				// 将文件转二进制
				formData.append('picUrl', e[0]);
				console.log(formData)
				$.ajax({
					url: uploadHead,
					type: "post",
					dataType: "json",
					cache: false,
					async: false,
					data: formData,
					xhrFields: {
						withCredentials: true
					},
					processData: false, // 不处理数据 
					contentType: false, // 不设置内容类型 
					success: function(data) { /* 后端返回的数据格式为 {"url": "xxxxxx"} */
						console.log(data)
						a = data.rows
					}
				})
				return a;
			}
			layui.config({
				base: '../../module/'
			}).extend({
				formSelects: 'formSelects/formSelects-v4',
				treetable: 'treetable-lay/treetable'
			}).use(['config', 'index', 'element'], function() {
				var config = layui.config;
				var index = layui.index;
				var element = layui.element;
				// 检查多标签功能是否开启
				index.checkPageTabs();

				var igu = localStorage.getItem("gao");
				$('.zby_it').css("height", igu - 130 + "px")

			});

			//使用编辑器
			var E = window.wangEditor
			var editor = new E('#editor')
			// 或者 var editor = new E( document.getElementById('editor') )
			editor.customConfig.uploadImgServer = uploadHead;
			editor.customConfig.uploadImgMaxLength = 3;
			editor.customConfig.withCredentials = true;
			editor.customConfig.uploadImgTimeout = 10000;

			editor.customConfig.emotions = [{
					// tab 的标题
					title: '默认',
					// type -> 'emoji' / 'image'
					type: 'image',
					// content -> 数组
					content: mxbq
				},
				{
					// tab 的标题
					title: 'emoji',
					// type -> 'emoji' / 'image'
					type: 'emoji',
					// content -> 数组
					content: ['😀', '😃', '😄', '😁', '😆']
				}
			]

			editor.create()

			layui.use(['formSelects', 'table', 'util', 'config', 'index', 'admin', 'form'], function() {
				var form = layui.form;
				var table = layui.table;
				var config = layui.config;
				var layer = layui.layer;
				var util = layui.util;
				var index = layui.index;
				var admin = layui.admin;
				var admin2 = parent.layui.admin;

				var formSelects = layui.formSelects;

				var pd = admin.getTempData("matterv")
				var md = admin.getTempData("matterd")
				var isz = ["", "", ""]
				//				console.log(md.classifyId)

				$("#qx").click(function() {

					layer.confirm('确定取消编辑吗？', function(i) {
						layer.close(i);
						layer.load(2);
						admin2.events.closeThisTabs()
					});
				})

				function showE(sj) {
					table.render({
						elem: '#ess-table',
						page: true,
						data: sj,
						cols: [
							[{
									field: 'commentId',
									title: 'ID',
									width: 80
								},
								{
									field: 'headPortrait',
									title: '头像',
									width: 80,
									style: 'height:70px;padding:0;',
									templet: function(b) {
										if(b.headPortrait == null || b.headPortrait == "") {
											var s = '<div><img src="../../assets/images/mrtx.png" width="50px"  height="50px" /></div>'
											return s
										} else {
											var s = '<div><img src="'
											s += b.headPortrait;
											s += '" width="50px"  height="50px" /></div>'
											return s
										}
									}
								},
								{
									field: 'nickname',
									title: '评论者',
									width: 150,
								},
								{
									field: 'content',
									title: '评论内容',
									width: 350,
								}, {
									field: 'addTime',
									title: '评论时间',
									width: 180,
								}, {
									field: 'show',
									templet: '#essaySwitch',
									width: 120,
									unresize: true,
									title: '发布状态'
								}
							]
						]
					});
				}

				form.on('switch(essayShow)', function(obj) {
					if(obj.elem.checked == true) {
						updateZt(this.id, "1")
					} else {
						updateZt(this.id, "0")
					}
				});

				form.on('select(btt)', function(data) {
					console.log(data)
					if(data.value == "1") {
						$("#i1").css("display", "block");
						$("#i2").css("display", "none");
						$("#i3").css("display", "none");
					} else if(data.value == "0") {
						$("#i1").css("display", "none");
						$("#i2").css("display", "none");
						$("#i3").css("display", "none");
					} else if(data.value == "3") {
						$("#i1").css("display", "block");
						$("#i2").css("display", "block");
						$("#i3").css("display", "block");
					}
				})

				$(document).ready(function() {
					$("#file1").on("change", upload);
					$("#file2").on("change", upload2);
					$("#file3").on("change", upload3);
				})

				function upload() {
					var self = this;
					$.ajax({
						url: uploadHead,
						type: "post",
						dataType: "json",
						cache: false,
						data: new FormData($("#formTag1")[0]),
						xhrFields: {
							withCredentials: true
						},
						processData: false, // 不处理数据 
						contentType: false, // 不设置内容类型 
						success: function(data) { /* 后端返回的数据格式为 {"url": "xxxxxx"} */
							console.log(data)
							isz = [data.rows]
							//							$('#i1').attr("background",  "http://admin.sungohealth.com/pic/935c23ca-5793-4984-840c-e4e457201fa8huaji.jpg")
							$(self).parent().css({
								"background-image": "url(" + data.rows + ")"
							})
						}
					})
				}

				function upload2() {
					var self = this;
					$.ajax({
						url: uploadHead,
						type: "post",
						dataType: "json",
						cache: false,
						data: new FormData($("#formTag2")[0]),
						xhrFields: {
							withCredentials: true
						},
						processData: false, // 不处理数据 
						contentType: false, // 不设置内容类型 
						success: function(data) { /* 后端返回的数据格式为 {"url": "xxxxxx"} */
							console.log(data)
							isz[1] = data.rows
							//							$('#i2').attr("background-image", data.rows)
							$(self).parent().css({
								"background-image": "url(" + data.rows + ")"
							})
						}
					})
				}

				function upload3() {
					var self = this;
					$.ajax({
						url: uploadHead,
						type: "post",
						dataType: "json",
						cache: false,
						data: new FormData($("#formTag3")[0]),
						xhrFields: {
							withCredentials: true
						},
						processData: false, // 不处理数据 
						contentType: false, // 不设置内容类型 
						success: function(data) { /* 后端返回的数据格式为 {"url": "xxxxxx"} */
							console.log(data)
							isz[2] = data.rows
							//							$('#i3').attr("background-image", data.rows)
							$(self).parent().css({
								"background-image": "url(" + data.rows + ")"
							})
						}
					})
				}
				if(pd == "update") {
					showEV()
				}

				function showEV() {

					$.ajax({
						type: "POST",
						url: getComments,
						data: {
							params: JSON.stringify({
								pageSize: 1000,
								pageNumber: 1,
								type: 'article',
								otherId: md.articleId + ""
							})
						},
						dataType: "json",
						xhrFields: {
							withCredentials: true
						},
						beforeSend: function(request) {},
						success: function(data) {
							console.log(data)
							showE(data.rows)
						},
						beforeSend: function() {},
						complete: function() {},

						error: function(result) {
							console.log(result);
						}
					});
				}

				function updateZt(id, zt) {
					$.ajax({
						type: "POST",
						url: reviewComments,
						data: {
							params: JSON.stringify({
								commentId: parseInt(id),
								show: zt
							})
						},
						dataType: "json",
						xhrFields: {
							withCredentials: true
						},
						beforeSend: function(request) {},
						success: function(data) {
							console.log(data)
							if(data.code == 0) {
								layer.msg(data.msg, {
									icon: 1
								});
							} else {
								layer.msg(data.msg, {
									icon: 2
								});
							}
						},
						beforeSend: function() {},
						complete: function() {},

						error: function(result) {
							console.log(result);
						}
					});
				}

				showfl()

				function q() {
					admin2.events.closeThisTabs()
				}

				function showfl() {
					$.ajax({
						type: "POST",
						url: getClassifys,
						data: {
							params: JSON.stringify({
								pageSize: 1000,
								pageNumber: 1,
							})
						},
						dataType: "json",
						xhrFields: {
							withCredentials: true
						},
						beforeSend: function(request) {},
						success: function(data) {
							$('#role-form')[0].reset();
							var select = document.getElementById("flSele")
							select.options.add(new Option("请选择", ''))
							for(var i = 0; i < data.rows.length; i++) {
								select.options.add(new Option(data.rows[i].classifyName, data.rows[i].classifyId));
							}
							form.render(); //更新全部
							form.render(select); //刷新select选择框渲染
							if(pd == "update") {
								$("#wzm").val(md.title);
								$("#jianj").val(md.description);
								$("#biaoq").val(md.label);
								editor.txt.html(md.content);
								$("#flSele").val(md.classifyId);
								var upicUrl = md.picUrl;
								if(upicUrl != null) {
									if(upicUrl == "") {
										upicUrl = []
									} else {
										upicUrl = md.picUrl.split(',');
									}
									if(upicUrl.length == 0) {
										$("#bt").val(0);
										$("#i1").css("display", "none");
										$("#i2").css("display", "none");
										$("#i3").css("display", "none");
									}

									if(upicUrl.length == 1) {
										$('#i1').css("background-image", "url(" + upicUrl[0] + ")")
										isz[0] = upicUrl[0]
										$("#bt").val(1);
										$("#i1").css("display", "block");
										$("#i2").css("display", "none");
										$("#i3").css("display", "none");
									}
									if(upicUrl.length == 3) {
										$('#i2').css("background-image", "url(" + upicUrl[1] + ")")
										isz[1] = upicUrl[1]

										$('#i3').css("background-image", "url(" + upicUrl[2] + ")")
										isz[2] = upicUrl[2]

										$("#bt").val(3);
										$("#i2").css("display", "block");
										$("#i3").css("display", "block");
									}
									//									if(upicUrl[2] != "") {
									//
									//									}
								}
							}
						},
						beforeSend: function() {},
						complete: function() {

						},

						error: function(result) {
							console.log(result);
						}
					});
				}

				$("#look").click(function() {
					var wz = $("#wzm").val().trim();
					var jj = $("#jianj").val();
					var fs = $("#flSele ").val();
					var nr = editor.txt.html()
					var nr2 = editor.txt.text()

					if(wz.length <= 0) {
						layer.msg("请输入文章名称！", {
							icon: 2
						})
						return;
					}
					if(jj.length <= 0) {
						layer.msg("请输入简介！", {
							icon: 2
						})
						return;
					}

					if(nr2.length <= 0) {
						layer.msg("请输入文章内容后进行预览！", {
							icon: 2
						})
						return;
					}

					$(".ztit").html(wz);
					$(".zcont").html(nr);

					$("#thisLook").css("display", "block");
				})

				$("#qh").click(function() {
					var x = document.getElementById('qh')
					if(x.innerHTML == "iPhone 8 预览") {
						x.innerHTML = "iPhone x 预览"
						$(".zbyiPhone8").css("display", "block");
						$(".zbyiPhonex").css("display", "none");

					} else if(x.innerHTML == "iPhone x 预览") {
						x.innerHTML = "iPhone 8 预览"
						$(".zbyiPhonex").css("display", "block");
						$(".zbyiPhone8").css("display", "none");
					}
				})

				$("#clos").click(function() {
					$("#thisLook").css("display", "none");
				})

				$("#cun").click(function() {
					var wz = $("#wzm").val().trim();
					var zuz = $("#zuozhe ").val();
					var fs = $("#flSele ").val();
					var jj = $("#jianj").val();
					var bq = $("#biaoq").val();
					var nr = editor.txt.html()
					var nr2 = editor.txt.text()
					var bt = $("#bt").val();

					if(wz.length <= 0) {
						layer.msg("请输入文章名称！", {
							icon: 2
						})
						return;
					}

					if(jj.length <= 0) {
						layer.msg("请输入简介！", {
							icon: 2
						})
						return;
					}

					if(nr2.length <= 0) {
						layer.msg("请输入文章内容！", {
							icon: 2
						})
						return;
					}

					if(bt == 1) {
						console.log('"' + isz[0] + '"')
						console.log($("#i1").css("backgroundImage").replace('url(', '').replace(')', ''))
						console.log('"' + isz[0] + '"' != $("#i1").css("backgroundImage").replace('url(', '').replace(')', ''))

						if(isz[0] == "") {
							layer.msg("请选择标题图！", {
								icon: 2
							})
							return;
						} else {
							isz = [isz[0]]
							console.log(isz)
						}

					}

					if(bt == 0) {
						isz = []
					}

					if(bt == 3) {
						if(isz[0] == "") {
							layer.msg("请选择第一幅标题图！", {
								icon: 2
							})
							return;
						}
						if(isz[1] == "") {
							layer.msg("请选择第二幅标题图！", {
								icon: 2
							})
							return;
						}
						if(isz[2] == "") {
							layer.msg("请选择第三幅标题图！", {
								icon: 2
							})
							return;
						}
					}

					if(isz.length > 0) {
						var urls = isz.join(',')
					} else {
						var urls = ""
					}

					console.log(urls)
					var path = ""
					var d = ""

					if(pd == "update") {
						path = updateArticles
						d = {
							articleId: md.articleId,
							userId: zuz,
							title: wz,
							content: nr,
							classifyId: fs,
							picUrl: urls,
							description: jj,
							label:bq,
							show: 0
						}
					} else if(pd == "new") {
						path = addArticles
						d = {
							userId: zuz,
							title: wz,
							content: nr,
							classifyId: fs,
							picUrl: urls,
							description: jj,
							label:bq,
							show: 0
						}
					}

					console.log(path)
					console.log(d)

					$.ajax({
						type: "POST",
						url: path,
						data: {
							params: JSON.stringify(d)
						},
						dataType: "json",
						xhrFields: {
							withCredentials: true
						},
						beforeSend: function(request) {},
						success: function(data) {
							if(data.code == 0) {
								layer.msg(data.msg + "此界面将于 2 秒后关闭，请手动刷新文章列表界面", {
									icon: 1
								});
								setTimeout(q, 2000);
							} else {
								layer.msg(data.msg, {
									icon: 2
								});
							}
						},
						beforeSend: function() {},
						complete: function() {},

						error: function(result) {
							console.log(result);
						}
					});

				})

			})
		</script>
	</body>

</html>